<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#map {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=PVheBQ3Uq9NAdiF3NZaxSAEjtMSsRpTg"></script>
	<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
	<title>地图展示</title>
</head>
<body>
	<div id="map" style="height: 100%"></div>
</body>
<!-- <script type="text/javascript">
map = new BMap.Map("map");
map.centerAndZoom(new BMap.Point(116.417854,39.921988), 15);
</script> -->
<script type="text/javascript">
	var lng ='${param.location_lng}',lat= '${param.location_lat}';
    map = new BMap.Map("map",{mapType:BMAP_HYBRID_MAP});
    
    var point = new BMap.Point(lng, lat);
    map.centerAndZoom(point, 13);

    map.addControl(new BMap.NavigationControl());
    map.addControl(new BMap.MapTypeControl({mapTypes:[BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP,BMAP_HYBRID_MAP]}));
    map.enableScrollWheelZoom(true);

    function getBoundary(){
        var bdary = new BMap.Boundary();
        bdary.get("深圳", function(rs){       //获取行政区域
            //map.clearOverlays();        //清除地图覆盖物
            var count = rs.boundaries.length; //行政区域的点有多少个
            if (count === 0) {
                alert('未能获取当前输入行政区域');
                return ;
            }
            var pointArray = [];
            for (var i = 0; i < count; i++) {
                var ply = new BMap.Polygon(rs.boundaries[i], {fillOpacity: 0, strokeWeight: 2,
                    strokeColor: "#ff0000"});
                ply.setFillColor();
                //建立多边形覆盖物
                map.addOverlay(ply);  //添加覆盖物
                pointArray = pointArray.concat(ply.getPath());
            }
            map.setViewport(pointArray);    //调整视野
        });
    }
    
    function loadPage( _url ){
    	//iframe里获取global
    	//window.parent.global.search_station_type
    	if (_url == 'data') {
    		$(window.parent.document).find("#deviceData").trigger("click");
    	} else if (_url == 'charts') {
    		$(window.parent.document).find("#deviceData_charts").trigger("click");
    	} else if (_url == 'stat') {
    		$(window.parent.document).find("#work_stat").trigger("click");
    	}
    }
    
    var sContent =
        "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>${param.name}</h4>" +
        "<img style='float:right;margin:4px' id='imgDemo' src='/pic/${param.image_url}' width='104' height='104' title=''/>" +
        "<p></p>" +
        "<p style='margin:0;line-height:1.5;font-size:13px;'>经度："+lng+"</p>" +
        "<p style='margin:0;line-height:1.5;font-size:13px;'>纬度："+lat+"</p>" +
        "<p></p>" +
        "<input type='button' value='数据查询' onclick=\"loadPage" +
        "('data')\"/>" +
        "<input type='button' value='图表分析' onclick=\"loadPage" +
        "('charts')\"/>" +
        "<input type='button' value='设备工况' onclick=\"loadPage" +
        "('stat')\"/>" +
        "</div>";
    
    var opts = {
			width : 280,     // 信息窗口宽度
			//height: 280,     // 信息窗口高度
			//title : "信息窗口" , // 信息窗口标题
			enableMessage:true//设置允许信息窗发送短息
		   };
    function addClickHandler(content,marker){
		marker.addEventListener("click",function(e){
			openInfo(content,e)}
		);
	}
    
    function openInfo(content,e){
		var p = e.target;
		var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
		var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
		map.openInfoWindow(infoWindow,point); //开启信息窗口
	}

    //坐标转换完之后的回调函数
    translateCallback = function (data){
    	console.log(data);
        if(data.status === 0) {
        	//getBoundary();
        	//map.centerAndZoom(data.points[0], 13);
        	
            var marker = new BMap.Marker(data.points[0]);
            map.addOverlay(marker);
            var infoWindow = new BMap.InfoWindow(sContent,opts);  // 创建信息窗口对象 
    		map.openInfoWindow(infoWindow,data.points[0]); //开启信息窗口
    		
            addClickHandler(sContent,marker);
        }
    }

    //获取灾害体和设备数据
    /* $.ajax({
		  url: '../../tbl_zht/all',
		  type : 'get',
		  async : false,
		  contentType: "application/json; charset=utf-8",
		  dataType: "json",
		  success: function(json) {
			  initStation(json.station);
			  initContent(json.station,json.stationImg);
		  }
	}); */
    
	setTimeout(function(){
    	var convertor = new BMap.Convertor();
    	var pointArr = [];
   		//var point = new BMap.Point(station.location_lng, station.location_lat);
   		pointArr.push(point);
    	console.log(pointArr);
    	convertor.translate(pointArr, 1, 5, translateCallback);
	}, 0);
    
    function initContent(station,stationImg) {
    	content =
            "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>"+station.name+"</h4>" +
            "<img style='float:right;margin:4px' id='imgDemo' src='/pic/"+stationImg.image_url+"' width='104' height='104' title=''/>" +
            "<p></p>" +
            "<p style='margin:0;line-height:1.5;font-size:13px;'>经度："+station.location_lng+"</p>" +
            "<p style='margin:0;line-height:1.5;font-size:13px;'>纬度："+station.location_lat+"</p>" +
            "<p></p>" +
            "<input type='button' value='详细信息' onclick=\"loadPage" +
            "('')\"/>" +
            "</div>";
    }

</script>
</html>

